<template>
  <view class="sc-10" @click="detail()">
    <view class="top-tip" v-show="!props.obj.collection_no">
      <u-icon name="clock" size="28"></u-icon>
      {{ props.obj.status_text }}
    </view>
    <!-- <image src='../../static/image/cangpin.png'></image> -->
    <view class="sc-11">
      <image :src="props.obj.collection_img || props.obj.image"></image>
    </view>
    <view class="sc-17">
      <view class="sc-12">{{
        props.obj.collection_name || props.obj.name
      }}</view>

      <view class="tip">
        <view class="tip-l">星艺藏品 </view>
		<view v-if="props.isauthor=='yes'" class="tip-2">首发 </view>
        <view class="tip-r" v-show="props.obj.collection_no">
          <view class="tip-r-l">编号</view>
          <view class="tip-r-r"># {{ props.obj.collection_no }}</view>
        </view>
      </view>
      <view class="logo" v-show="!props.obj.collection_no">
        <u-image
          style="margin-right: 10rpx"
          :src="props.obj.author_avatar"
          width="50"
          height="50"
          shape="circle"
        ></u-image>
        {{ props.obj.author_name }}
      </view>
      <view class="sc-14">
        <view class="sc-16"
          >¥ {{ props.obj.price ? props.obj.price : '暂无价格' }}</view
        >
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
const props = defineProps({
  obj: {
    type: Object,
    default: {}
  },
  //首发0还是寄售2
  type: {
    type: String,
    default: '0'
  },
  isauthor: {
    type: String,
    default: 'no'
  },
})
const detail = () => {
  uni.navigateTo({
    url: `/pages/blind-box-details/index?id=${props.obj.id}&type=${props.type}`
  })
}
</script>
<style lang="scss" scoped>
.sc-10 {
  position: relative;
  width: calc(50% - 20rpx);
  background: #231f30;
  border-radius: 26upx;
  overflow: hidden;
  margin-top: 40rpx;
  background-image: url(../../../static/images/cangpin.png);
  background-size: 100% 100%;
}

.sc-10 > image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sc-11 {
  width: 100%;
}

.sc-11 image {
  user-select: none;
  pointer-events: none;
  width: 100%;
  height: 332rpx;
  display: block;
  border-radius: 30rpx;
}

.sc-17 {
  padding: 0 25rpx;
  margin-bottom: 50rpx;
  box-sizing: border-box;
  .tip {
    display: flex;
    padding-top: 18px;
    font-size: 22rpx;
    .tip-l {
      width: 120rpx;
      height: 40rpx;
      background-image: linear-gradient(to right, #9f56ff, #9f56ff);
      border-radius: 10rpx;
      line-height: 40rpx;
      text-align: center;
      color: #fff;
    }
	.tip-2 {
	  margin-left: 20rpx;
	  width: 80rpx;
	  height: 40rpx;
	  background-image: linear-gradient(to right, #9f56ff, #9f56ff);
	  border-radius: 10rpx;
	  line-height: 40rpx;
	  text-align: center;
	  color: #fff;
	}
    .tip-r {
      display: flex;
      height: 40rpx;
      margin-left: 20rpx;
      width: 200rpx;
      .tip-r-l {
        width: 40%;
        background: #c63bf8;
        line-height: 40rpx;
        text-align: center;
        color: #fff;
      }
      .tip-r-r {
        flex: 1;
        background: #68637e;
        line-height: 40rpx;
        text-align: center;
        color: #fff;
      }
    }
  }
  .logo {
    padding-top: 20rpx;
    text-align: left;
    color: #fff;
    display: flex;
    align-items: center;
  }
}

.sc-12 {
  color: #fff;
  margin-top: 18upx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  font-size: 30rpx;
}

.sc-14 {
  width: 100%;
  height: 50upx;
  line-height: 50upx;
  margin-top: 20rpx;
}

.sc-14:nth-child(2) {
  margin-top: 30rpx;
}

.sc-14:last-child {
  margin-bottom: 30rpx;
}

.sc-16 {
  text-align: left;
  font-size: 40rpx;
  color: #fff;
}
.top-tip {
  color: #8b8b8b;
  position: absolute;
  top: 20rpx;
  left: 10rpx;
  z-index: 2;
  background-color: #070707;
  width: 140rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 20rpx;
}
</style>
